﻿@model Sheng.WeixinConstruction.Management.Shell.Models.PortalStyle_TemplateViewModel

@{
    ViewBag.MainMenu = "Portal";
    ViewBag.LeftMenu = "PortalStyle";

    ViewBag.Title = "微主页设置";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<script type="text/javascript">

    var _validator;
    var _templateId;

    $(document).ready(function () {
        if (_online == false)
            return;

        $("[keyenter]").keypress(function (e) {
            if (e.keyCode == 13) {
                save();
            }
        });

        _validator = $("#form").validate({
            onfocusout: false,
            onkeyup: false,
            showErrors: showValidationErrors,
            rules: {
               // "txtImageUrl": "required"
            },
            messages: {
             //   "txtImageUrl": "请选择背景图片；"
            }
        });

        loadImage();

        

       // $("#iframe").attr("src", "/Portal/PortalTemplatePreview?new=" + Math.random());
    });

    function iframeReady() {
        var templateId = $("#txtTemplateId").val();
        if (templateId != "") {
            loadTemplate(templateId);
        }
    }

    function loadTemplate(id) {
        _templateId = id;

        $("#txtTemplateId").val(id);
        document.getElementById("iframe").contentWindow.setTemplate(id);

        var portalImageUrl = $("#txtImageUrl").val();
        document.getElementById("iframe").contentWindow.setPortalImage(portalImageUrl);
    }

    function save() {
        if (_validator.form() == false) {
            return;
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();

        args.PortalImageUrl = $("#txtImageUrl").val();
        if ($("#txtTemplateId").val() != "") {
            args.PortalPresetTemplateId = $("#txtTemplateId").val();
        } else {
            args.PortalPresetTemplateId = null;
        }

        var url = "/Api/Portal/SavePortalStyleSettings_Template";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    layerAlert("保存成功，您的设置将在几分钟之内生效。");
                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadImage() {
        //这里不可以调用 iframe，还没加载完
        $("#image").attr("src", $("#txtImageUrl").val());
    }

    function uploadFile() {
        __showFileUpload(getUploadResult);
    }

    function getUploadResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        $("#txtImageUrl").val(url);
        loadImage();

        var portalImageUrl = $("#txtImageUrl").val();
        document.getElementById("iframe").contentWindow.setPortalImage(portalImageUrl);
    }

    function removeImage() {
        $("#txtImageUrl").val("");
        loadImage();

        var portalImageUrl = $("#txtImageUrl").val();
        document.getElementById("iframe").contentWindow.setPortalImage(portalImageUrl);
    }

    function showPortalTemplateSelect() {
        //alert(0);
        layer.open({
            type: 2,
            area: ['90%', '90%'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: '/Portal/PortalTemplateSelect'
        });
    }

    function selectTemplateResult(template, layerIndex) {
        if (layerIndex != undefined && layerIndex != null) {
            layer.close(layerIndex);
        }

        $("#spanTemplateName").html(template.Name);
        $("#spanDescription").html(template.Description);
        $("#txtImageUrl").val(template.BackgroundImageUrl);

        loadImage();

        loadTemplate(template.Id);

        //$("#previewImage").attr("src", template.PreviewImageUrl);

    }

    function exportToCustom() {
        if (_templateId == null || _templateId == "") {

            layerMsg("请先选择模版。");
            return;
        }

        var portalImageUrl = encodeURI($("#txtImageUrl").val());
        window.location.href = "/Portal/PortalStyle_Custom?importTemplateId=" + _templateId + "&portalImageUrl=" + portalImageUrl;
    }

</script>

<style type="text/css">
    /*.divBaseSettingsTitle {
        margin-top: 25px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .divBaseSettings {
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }*/
</style>

<div id="divContentTips">
    选择一款合适的模版，再上传一副图片即可。
</div>

<div  style="margin-top:10px;">
    您可以在“公众号菜单”中，添加微主页菜单，也可通过微信官方后台将此 URL 添加到菜单中访问微主页。 
</div>
<div class="divBorder_lightgray" style="margin-top:10px;padding:10px;font-size:13px;">
    http://@(ViewBag.DomainContext.AppId).wxc.shengxunwei.com/Home/Portal/@(ViewBag.Domain.Id)
</div>

<div>
    <form id="form">
        <div style=" margin-top:20px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="td_ContentTab_active" style="width:200px;">基于模版</td>
                    <td class="td_ContentTab" style="width:200px;"><a href="/Portal/PortalStyle_Custom" class="a_black_16">自定义</a></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="4" bgcolor="#EEEEEE" height="2"></td>
                </tr>
            </table>
        </div>
        <div style="margin-top:20px;">
            <input type="hidden" id="txtTemplateId" value="@Model.Settings.PortalPresetTemplateId" />
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="330" valign="top">
                        <table width="286" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="3"><img src="/Content/Images/iphone_top.jpg" width="286" height="74"></td>
                            </tr>
                            <tr>
                                <td width="4" rowspan="2" valign="top" style="background-image: url(/Content/Images/iphone_left_b.jpg);"><img src="/Content/Images/iphone_left.jpg" width="4" height="157"></td>
                                <td width="280" height="48" align="center" valign="top" style="background-image: url(/Content/Images/iphone_title.jpg);">
                                    <div style="margin-top:22px;color:white;">
                                        @ViewBag.DomainContext.Authorizer.NickName
                                    </div>
                                </td>
                                <td width="2" rowspan="2" valign="top" style="background-image: url(/Content/Images/iphone_right.jpg);"><img src="/Content/Images/iphone_right.jpg" width="2" height="3"></td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <iframe id="iframe" src="/Portal/PortalTemplatePreview" style="width:280px;height:450px;border:none"></iframe>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3"><img src="/Content/Images/iphone_bottom.jpg" width="286" height="67"></td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <div style="margin-top:0px;">
                            <input name="btnSave" type="button" class="btn_blue" id="btnStep2Next" value="选择模版" onclick="showPortalTemplateSelect()" />
                            <input name="btnSave" type="button" class="btn_blue" id="btnStep2Next" value="导入自定义" onclick="exportToCustom()" style="margin-left:10px;" />
                            <input name="btnSave" type="button" class="btn_blue" id="btnStep2Next" value="保存" onclick="save()" style="margin-left:20px;" />
                        </div>
                        <div style="margin-top:25px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="100" height="30">名称：</td>
                                    <td>
                                        <span id="spanTemplateName">
                                            @if (Model.Settings.PortalPresetTemplate != null)
                                            {
                                                @Model.Settings.PortalPresetTemplate.Name
                                            }
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="30">说明：</td>
                                    <td>
                                        <span id="spanDescription">
                                            @if (Model.Settings.PortalPresetTemplate != null)
                                            {
                                                @Model.Settings.PortalPresetTemplate.Description
                                            }
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="30">图片：</td>
                                    <td>
                                        <div class="divBorder_gray" style="margin-bottom:5px;width:96%;">
                                            <div style="padding:5px;">
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td width="120"><img id="image" alt="" style="max-height:300px;max-width:300px;" /></td>
                                                        <td align="right">
                                                            <input id="txtImageUrl" name="txtImageUrl" value="@Model.Settings.PortalImageUrl" type="hidden" class="input_16" style="width:96%; " maxlength="500" keyenter />
                                                            <a href="javascript:void(0)" onclick="uploadFile()">上传新图片</a><br />
                                                            <a href="javascript:void(0)" onclick="removeImage()">删除图片</a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div style="margin-top:25px;color:#666666;line-height:24px;">
                            想要对模版进行调整？ <br />
                            如果选择到了比较钟意的模版，但是想要细节上的调整，可以将模版导入“自定义”中，然后进行修改。不过这需要您稍微掌握一些前端开发技术。<br />
                            如果您是职业前端开发人员，可以通过“自定义”功能自由的制作自己的微主页，不会产生任何费用。<br />
                            您也可以联系我们寻求服务：电话：0550-3926191 / 18114009195 / QQ：279060597
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        @*<div class="divBaseSettings">
            <input type="hidden" id="txtTemplateId" value="@Model.Settings.PortalPresetTemplateId" />
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td height="50" width="140" valign="top">模版：</td>
                    <td valign="top">
                        <div class="divBorder_gray" style="width:280px">
                            <img id="previewImage" src="@Model.Settings.PortalPresetTemplate.PreviewImageUrl" alt="" style="max-width:280px;" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td height="50">&nbsp;</td>
                    <td>
                        <span id="spanTemplateName">
                            @if (Model.Settings.PortalPresetTemplate != null)
                            {
                                @Model.Settings.PortalPresetTemplate.Name
                            }
                        </span> - <a href="javascript:void(0)" onclick="showPortalTemplateSelect()">选择模版</a>
                    </td>
                </tr>
                <tr>
                    <td height="50">背景图片：</td>
                    <td><input name="txtImageUrl" type="text" class="input_18" id="txtImageUrl" maxlength="500" value="@Model.Settings.PortalImageUrl" keyenter /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><a href="javascript:void(0)" onclick="uploadFile()">上传新图片</a></td>
                </tr>
            </table>
        </div>

        <div style="margin-top: 15px;">
            <input name="btnSave" type="button" class="btn_blue" id="btnStep2Next" value="保存" onclick="save()" />
        </div>*@
    </form>
</div>
@Helpers.FileUpload()